<template>
  <div>
    <el-card shadow="never" :body-style="{ padding: '20px' }" class="box">
      <div class="header-container">
        <ElAvatar :size="200" :src="userStore.avatar" class="avatar"></ElAvatar>
        <div class="text-container">
          <h1 class="title">{{ welcomeTxt }} {{ userStore.username }}</h1>
          <h2 class="welcome">基于前端开发技术的的商品销售管理系统</h2>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup name="Home">
import useUserStore from '@/store/modules/useUser'
import { onMounted, ref } from 'vue'
let userStore = useUserStore()
let welcomeTxt = ref('')
let getTime = () => {
  // 获取当前小时
  const now = new Date()
  let hours = now.getHours()
  // 根据小时数判断并输出相应的问候语
  if (hours < 6) {
    welcomeTxt.value = '晚上好！'
  } else if (hours < 12) {
    welcomeTxt.value = '早上好！'
  } else if (hours < 14) {
    welcomeTxt.value = '中午好！'
  } else if (hours < 18) {
    welcomeTxt.value = '下午好！'
  } else {
    welcomeTxt.value = '晚上好！'
  }
}
onMounted(() => {
  getTime()
})
</script>

<style scoped lang="scss">
.box {
  display: flex;
  .header-container {
    display: flex;
    align-items: center; /* 使内容垂直居中 */
  }
  .text-container {
    margin-left: 20px;
    .title {
      font-size: 30px;
      margin-bottom: 50px;
      font-weight: 900;
    }
    .welcome {
      font-style: italic;
      color: skyblue;
      font-size: 18px;
    }
  }
}
</style>
